<!-- 
*   @Description:产品服务
*   @Author:lxy
*   @Date:2023-03-23 10:23
-->
<template>
  <div class="jdgrfr">
    <span @click="clickHandler" class="spanClass">
      <i class="el-icon-refresh-right luruI" title="前往录入信息"></i>
    </span>
    <div class="krnfvkrehng" @click="fabuClickHandler">
      <div class="container">
        <i style="--clr: #00ff0a"></i>
        <i style="--clr: #ff0057"></i>
        <i style="--clr: #fffd44"></i>
        <div class="login">
          <span>发布任务</span>
          <!-- <h2>Login</h2>
          <div class="inputBx">
            <input type="text" placeholder="Username" />
          </div>
          <div class="inputBx">
            <input type="password" placeholder="Password" />
          </div>
          <div class="inputBx">
            <input type="submit" value="Sign in" />
          </div>
          <div class="links">
            <a href="#">Forget Password</a>
            <a href="#">Signup</a>
          </div> -->
        </div>
      </div>
    </div>

    <taskInFoDialog ref="taskInFoDialog"></taskInFoDialog>
  </div>
</template>

<script>
import taskInFoDialog from "./taskInFoDialog.vue";
export default {
  name: "pageOne",
  components: {
    taskInFoDialog,
  },
  data() {
    return {};
  },
  methods: {
    //点击录入信息
    clickHandler() {
      this.$emit("showPageHandler", false);
    },
    //点击发布任务
    fabuClickHandler() {
      this.$refs.taskInFoDialog.handleOpen();
    },
  },
};
</script>

<style scoped lang="less">
@import url('./css/google-fonts.css');
.spanClass{
  display: inline-block;
  width: 100%;
  text-align: right;
  .luruI{
    font-size: 32px;
    cursor: pointer;
  }
}
.jdgrfr {
  height: 100%;
  position: relative;
  // background-color: aqua;
}
.krnfvkrehng {
  height: 100%;
  cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
}
.container
{
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container i
{
  position: absolute;
  inset: 0;
  border: 2px solid #ef49d389; 
  transition: 0.5s;
}

.container i:nth-child(1) {
  border-radius: 43% 57% 74% 26% / 44% 30% 70% 56% ;
  animation: animate 6s linear infinite;
}

.container i:nth-child(2) {
  border-radius: 62% 38% 42% 58% / 52% 32% 62% 48%;
  animation: animate 4s linear infinite;
}

.container i:nth-child(3) {
  border-radius: 44% 56% 42% 58% / 37% 65% 35% 63%;
  animation: animate2 10s linear infinite;
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

@keyframes animate2 {
  0% {
    transform: rotate(360deg);
  }
  100%{
    transform: rotate(0deg);
  }
}

.container:hover i
{
 border: 6px solid var(--clr);
 filter: drop-shadow(0 0 20px var(--clr));
}

.container .login
{
  position: absolute;
  width: 200px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  span{
    font-size: 40px;
    color: #41c4f0;
    font-family: '华文行楷';
    letter-spacing: 10px;
  }
}
.container:hover .login span{
  color: #222121;
}

</style>
